<template>
  <d2-container class="page">
    <el-row  :gutter="20">
      <el-col :span="18" :offset="2">
        <el-button type="primary" plain @click="addParams()">新增目录</el-button>
        <!-- <el-tooltip content="刷新重置" placement="top" effect="light"><el-button type="primary" plain icon="el-icon-refresh" @click="refreshParams"></el-button></el-tooltip> -->
        
      </el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-table :data="dirSetList" style="width: 100%" border>
        <el-table-column prop="path" label="目录" show-overflow-tooltip> </el-table-column>
        <el-table-column label="服务" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.fw }}</el-tag>
          </template> 
        </el-table-column>
        <el-table-column label="操作" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除该配置？" @confirm="delParam(scope.row)">
              <el-button slot="reference" type="danger" size="mini" >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog title="新增目录" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="params" label-width="80px">
        <el-form-item label="目录：">
          <el-input autosize placeholder="请输入路径" v-model="params.path" clearable></el-input>
        </el-form-item>
        <el-form-item label="服务：">
          <el-select filterable  v-model="params.fw" placeholder="请选择服务">
            <el-option v-for="item in servers" :label="item" :value="item" :key="item" ></el-option>
          </el-select>
        </el-form-item>
        <el-row  :gutter="20">
          <el-col :span="8" :offset="16">
            <el-button type="primary" @click="saveParams">保存</el-button>
            <el-button type="info" @click="dialogVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      dirSetList:[],
      params: {},
      from: {},
      index:0,
      servers:[],
      dialogVisible:false
    }
  },
  methods: {
    addParams() {
      this.dialogVisible = true
    },
    delParam(row){
      console.log("row",row)
      this.delParamsApi(row)
    },
    saveParams(){
      this.saveParamsApi()
    },
    handleSelectedFwChange(value,index){
      let clone = this.deepClone(this.equisMap[value.lb].sxList)
      this.params[index].sxList = clone
    },
    async initServer () {
      try {
        const res = await this.$api.FILE_GET("json/server.json")
        console.log("initServer",res)
        this.servers = res
      } catch (error) {
        console.log(error)
      }
    },
    async saveParamsApi () {
      try {
        const res = await this.$api.DIR_SET_ADD(this.params)
        console.log("saveParamsApi",res)
        this.$message({message: res.errmsg,type: 'success'})
        this.dialogVisible=false
        this.init()
      } catch (error) {
        console.log(error)
      }
    },
    async delParamsApi (row) {
      try {
        const res = await this.$api.DIR_SET_DEL(row)
        console.log("delParamsApi",res)
        this.$message({message: res.errmsg,type: 'success'})
        this.init()
      } catch (error) {
        console.log(error)
      }
    },
    async initDirSetList () {
      try {
        const res = await this.$api.DIR_SET_GET()
        console.log("initDirSetList",res)
        this.dirSetList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    init() {
      this.initServer()
      this.initDirSetList()
    },
  },
  created() {
    this.init()
  },
}
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
  }
</style>
